var circleSize = 280;// 圆盘的大小(直径)
var circleR = circleSize / 2;// 圆盘的半径
var distance = circleR;// 圆心相对于容器的距离（原点）
var fnR = 30;// 小圆的半径
var fnMargin = 55; // 小圆圆心到大圆圆心的距离
var centerR = 40;//中心圆的半径
var imgWidth = 55;
var imgHeight = 60;
var boxId = "dial-box";// 画布容器html元素ID
var $box = $("#" + boxId);
$box.css({
	width : circleSize,
	height : circleSize
});

var fnArray = [ {
	text : "我要充值",
	src : "images/dial/dangmianfukuan.png",
	click:function(){
		openUrl(BASE_PATH + "kdpay/pay_select.jsp?scene=01");
	}
}, {
	text : "我要收款",
	src : "images/dial/yuanchenshoukuan.png",
	click:function(){
		openUrl(BASE_PATH + "kdpay/pay_select.jsp?scene=02");
	}
}, {
	text : "交易中心",
	src : "images/dial/jiaoyimingxi.png",
	click:function(){
		openUrl(BASE_PATH + "user/user_account.jsp");
	}
}, 
//{
//	text : "潇客",
//	src : "images/dial/xiaoke.png",
//	click:function(){
////		openUrl(BASE_PATH + "kdpay/pay_select.jsp?scene=01");
//	}
//}, 
{
	text : "便民服务",
	src : "images/dial/bianmingfuwu.png",
	click:function(){
		openUrl(BASE_PATH + "user/user_service.jsp");
	}
},{
	text : "大智梦收款",
	src : "images/dial/gongsishoukuan.png",
	click:function(){
		openUrl(BASE_PATH + "kdpay/createOrder.jsp?scene=03");
	}
} ];

var line = {
        stroke: "#fff",
        "stroke-width": 2,
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
    },
    dots = {
        stroke: "#fff",
        "stroke-width": 2,
        "stroke-dasharray": "- ",
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
    },
    fill = {
        stroke: "#fff",
        fill: "#fff",
        "fill-opacity": .5,
        "stroke-width": 2,
        "stroke-linecap": "round",
        "stroke-linejoin": "round"
    },
    none = {
        fill: "#000",
        opacity: 0
    };

var paper = Raphael(boxId, circleSize, circleSize);
//var path = paper.path("M10,10C23.333333333333332,16.666666666666668,90,36.666666666666664,90,50C90,63.333333333333336,23.333333333333332,83.33333333333333,10,90");
//var pathStr = "M" + circleR +"," + fnMargin;
//pathStr += "A" + (circleR + circleR / 2) + "," + (circleR / 4 ) + "," + (circleSize ) + "," + (circleR + 3*circleR/4) + "," + (circleSize ) + "," + (circleSize - circleR);
//pathStr += "a "+(circleR-fnMargin)+","+(circleR-fnMargin)+" 0 1 0 "+(circleR-fnMargin)+","+(circleR-fnMargin)+"";
//pathStr += "a "+(circleR-fnMargin)+","+(circleR-fnMargin)+" 0 1 0 -"+(circleR-fnMargin)+","+(circleR-fnMargin)+"";
//pathStr += " ";

//pathStr = "M300 200 a 150,150 0 1 0 0,150 l -70,-40a 70,70 0 1 1 0,-70  Z";
//var path = paper.path(pathStr).attr(line);
//path.attr({
//	opacity:"0.5"
//});
var c = paper.circle(circleR, circleR, circleR)
.attr({
	fill:"white",
	opacity:"0.2"
})
;

var c_2 = paper.circle(circleR, circleR, circleR - 10).attr({
	fill:"white",
	opacity:"0.1"
}).mouseover(function(evt){//浏览器端移动
//	evt.preventDefault();
//	for (var i = 0; i < menuList.length; i++) {
//		var menu = menuList[i];
//		menu.animate({
//            "path": "M10,10C23.333333333333332,16.666666666666668,90,36.666666666666664,90,50C90,63.333333333333336,23.333333333333332,83.33333333333333,10,90"
//        }, 600,"");
//	}
}).drag(function(dx,dy){//拖动
//	$("#test").html("dx:" + dx + ",dy:" + dy);
},function(){})
.click(function(){
//	menuArray[1]
})
;

function cancelDefaultEvt(obj){
	obj.touchmove(function(evt){
		evt.preventDefault();
	});
}
cancelDefaultEvt(c);
cancelDefaultEvt(c_2);

function prepare(id) {
    var div = document.getElementById(id);
//    div.style.cssText = "float:right;padding:10px;width:99px;height:99px;background:#2C53B0 url(http://raphaeljs.com/blueprint-min.png) no-repeat";
    return Raphael(div, 99, 99);
}

function getAngle(x1, y1, x2, y2) {
    // 直角的边长
    var x = Math.abs(x1 - x2);
    var y = Math.abs(y1 - y2);
    // 斜边长
    var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
    // 余弦
    var cos = y / z;
    // 弧度
    var radina = Math.acos(cos);
    // 角度
    var angle =  180 / (Math.PI / radina);
    return angle;
}
//var angle = getAngle(0, 0, 45, 45);

function getMenuArray() {
	var menuArray = [];
	var len = fnArray.length;
	var model = len % 2;

	for (var i = 0; i < len; i++) {
		var obj = fnArray[i];
		var ratio = 360 / len * i;
		var hudu = (2 * Math.PI / 360) * ratio;

		var X = distance + Math.sin(hudu) * (circleR - fnMargin);

		var Y = distance - Math.cos(hudu) * (circleR - fnMargin);
//		var X = distance + Math.sin(hudu) * (circleR - fnMargin);
//		
//		var Y = distance - Math.cos(hudu) * (circleR - fnMargin);

		// alert(ratio + " = " + X + " : " + Y);

//		var c = paper.circle(X, Y, fnR);
//		.attr({"fill":"red"})
		var img = paper.image(obj['src'],circleR - imgWidth/2,circleR - imgHeight/2,imgWidth,imgHeight)
		.data(obj)
		.data("customAnimate",function(_this){
			 (function (r) {
//				 var pathStr = "M" + circleR +"," + fnMargin;
//					//pathStr += "A" + (circleR + circleR / 2) + "," + (circleR / 4 ) + "," + (circleSize ) + "," + (circleR + 3*circleR/4) + "," + (circleSize ) + "," + (circleSize - circleR);
//					pathStr += "a "+(circleR-fnMargin)+","+(circleR-fnMargin)+" 0 1 0 "+(circleR-fnMargin)+","+(circleR-fnMargin)+"";
//					pathStr += "a "+(circleR-fnMargin)+","+(circleR-fnMargin)+" 0 1 0 -"+(circleR-fnMargin)+","+(circleR-fnMargin)+"";
//					pathStr += " ";
//					var _path = _this.data("_path",e);
//					var e;
////					if(_path){
////						e = _path;
////					}else{
//						e = r.path(pathStr).attr(line);
////					}
//		            var l = e.getTotalLength(),
//		            to = 1;
//			        l = l - l/6 * 2;
//			        _this.data("_path",e);
//			        r.customAttributes.along = function (a) {
//			            var p = e.getPointAtLength(a * l);
//			            var x = p.x;
//			            var y = p.y;
////			            if(){
////			            	
////			            }
//			            _this.attr({
//			            	x : x - imgWidth/2,
//			            	y: y - imgHeight/2
//			            });
//			            return {
//			                transform: "t" + [x ,y] + "r" + p.alpha
//			            };
//			        };
//			        var c = r.circle(0, 0,10).attr({
////			            along: 0
//			        }).attr(line);
//			        r.rect(0, 0, X - imgWidth/2, X - imgWidth/2).attr(none).click(function () {
//			        c.stop()
			        _this.animate({
//			                along: to
//			        	path : pathStr,
//			        	 x:100,
//				         y: 100,
				        transform: "r" + [360,circleR,circleR] + "r"+[-360]
//			        	transform : (function(){
//			        		return "t" + [100 ,100] + "r" + 360;
//			        	})()
			            }, 600,function(){
//			            	alert("t" + [100 ,100] + "r" + 1);
			            });
//			            to = +!to;
//			        });
			    })(paper);
		})
		.drag(function(dx,dy){
//			this.data("drag",true);
//			this.animate({
//				 x: X - imgWidth/2,
//		         y: Y-imgHeight/2
//	        }, 600,function(){
//	        	var _this = this;
//	        	_this.data("customAnimate")(this,X - imgWidth/2,Y-imgHeight/2);
//	        });
//			this.data("customAnimate")(this,dx,dy);
		},function(){
//			this.data("drag",false);
//			this.transform("s" + [1.1]);
		},function(){
//			var drag = this.data("drag");
//			this.transform("s" + [1]);
			//因为某些设备拖动事件会影响单击事件（如苹果设备），所以如果没有实际拖动，则结束后触发单击事件
//			if(!(drag == true)){
				this.data()['click']();
//			}
		})
//		.click(function(evt){
//			this.data("customAnimate")(this,X - imgWidth/2,Y-imgHeight/2);
//			var fn = this.data('click');
//			if(typeof fn === 'function'){
//				fn();
//			}
//		})
//		.mousedown(function(){
//			$("#test").html("mousedown");
//		}).mouseup(function(){
//			$("#test").html("mouseup");
//		}).mouseover(function(){
//			$("#test").html("mouseover");
//		})
//		.animate({
//            x: circleR,
//            y: circleR,
//            r: 15
//        }, 600,"")
		.animate({
			 x: X - imgWidth/2,
	         y: Y-imgHeight/2
        }, 600,function(){
        	var _this = this;
        	_this.data("_this",this);
        	_this.data("customAnimate")(this);
        })
		;
//		c.animate({
//            cx: circleR,
//            cy: circleR,
//            r: 15
//        }, 600,"")
//		;
		
		menuArray[i] = img;
	}
	return menuArray;
	// return fnArray;
}


var menuList = getMenuArray();

//var fnCircleList = paper.add(getMenuArray());

//for (var i = 0; i < fnCircleList.length; i++) {
//	var elm = fnCircleList[i];
//	elm.click(function(){
//		alert();
//	});
////	elm.image("images/dial/fukuan.png",0,0,50,50);
//	elm.data("i",i);
//}
//圆盘中心添加小圆盘
//paper.circle(circleR, circleR, centerR).attr({
//	fill:"white"
//});

//function onClickEvent(elmList,fn){
//	for (var i = 0; i < elmList.length; i++) {
//		var elm = elmList[i];
//		elm.click(fn);
//	}
//}

var logoWidth = 80;
var logoHeight = 80;
paper.image("images/dial/logo.png",circleR - logoWidth / 2,circleR - logoHeight / 2,logoWidth,logoWidth)
//.click(function(){
//	for(var i = 0;i<= menuList.length;i++){
//		var obj = menuList[i];
//		if(obj){
////			alert(obj.data("_this"));
//			obj.data("_this").animate({
//		        transform: "r" + [360,circleR,circleR] + "r"+[-360]
//	            }, 600,function(){
////	            	alert("t" + [100 ,100] + "r" + 1);
//	            });
//		}
//	}
//})
;
